<template>
  <div class="cart">
    <!-- 顶部导航栏 -->
    <NavBar class="cart-nav">
      <div slot="center">购物车({{getGoodNumber}})</div>
    </NavBar>

    <!-- 滚动区域内容 -->
    <Scroll class="cart-conent" ref="scroll">
      <CartListItem :goodItem="getCartList"/>
    </Scroll>

    <!-- 结算区域 -->
    <CartBottomBar/>

  </div>
</template>

<script>
// 公共组件导入
import NavBar from 'components/common/navbar/NavBar';
import Scroll from 'components/common/scroll/Scroll';

// 逻辑组件
import CartListItem from './childComps/CartListItem';
import CartBottomBar from './childComps/CartBottomBar';

// Vuex的getters属性导入
import { mapGetters } from 'vuex';

export default {
  name: 'Cart',
  components: {
    NavBar,
    Scroll,
    CartListItem,
    CartBottomBar
  },
  computed: {
    ...mapGetters(['getGoodNumber', 'getCartList'])
  },
  activated() {
    this.$refs.scroll.refresh(); // 由于加入购物车后会增加高度，Bscroll对高度并没有进行计算，手动调用
    
  }
}
</script>

<style scoped>
  .cart{
    height: 100vh;
    
  }
  .cart-nav{
    color: #fff;
    background-color: var(--color-tint);
  }

  /* 购物车滚动内容 */
  .cart-conent{
    height: calc(100% - 44px - 49px - 40px);
    overflow: hidden;
  }
</style>